/*
 * @Description: 结果页面组件
 * @Author: yingying.fan
 * @Date: 2019-03-19 10:52:59
 * @Last Modified by: yingying.fan
 * @Last Modified time: 2019-03-19 11:51:26
 */
<template>
  <div class="result-wrapper">
    <!-- <img :src="iconUrl"> -->
    <i :class="['iconfont baseColorNoAcitve',iconUrl]"></i>
    <div>
      <p class="fontsize30 result-state">{{text}}</p>
      <p class="fontsize32">{{desc}}</p>
      <span class="fontsize44">{{price}}</span>
    </div>
    <button
      class="fontsize30 baseBgColorWithActive"
      @click="clickBtn"
    >{{btnText}}</button>
  </div>
</template>

<script>
export default {
  props: {
    iconState: {
      type: Number,
      default: null
    },
    text: {
      type: String,
      default: ''
    },
    desc: {
      type: String,
      default: ''
    },
    price: {
      type: String,
      default: ''
    },
    btnText: {
      type: String,
      default: ''
    }
  },
  computed: {
    iconUrl() {
      let icon = ''
      switch (this.iconState) {
        case 0:
          // 查询中
          icon = 'icon-time'
          break
        case 1:
          // 成功
          icon = 'icon-seceed'
          break
        case 2:
          // 失败
          icon = 'icon-cancel-o'
          break
        default:
          break
      }
      return icon
    }
  },
  methods: {
    clickBtn() {
      this.$emit('click')
    }
  }
}
</script>

<style>
html,
body {
  background-color: #ffffff;
}
.result-wrapper {
  text-align: center;
  padding: 30px;
}
.result-wrapper > img {
  width: 140px;
  height: 140px;
  margin-top: 90px;
  border-radius: 50%;
}
.result-wrapper > i {
  display: inline-block;
  width: 140px;
  height: 140px;
  margin-top: 90px;
  border-radius: 50%;
  font-size: 140px;
}
.result-wrapper > div {
  height: 246px;
}
.result-state {
  color: #666666;
  padding: 26px 0;
}
.result-state + p {
  color: #999999;
}
.result-state + span {
  color: #333333;
}
.result-wrapper > button {
  width: 690px;
  height: 80px;
  border-radius: 10px;
  border: none;
  color: #ffffff;
}
</style>
